<template>
     <div class="huxing">
      <h3>优选户型</h3>
      <span>最好的户型, 给最特别的你</span>
      <p @click="jumpTo()">查看更多 ></p>
      <ul class="slide-box">
        <li
          @click="jump(item.boyu_quid)"
          class="slide-item"
          v-for="(item, index) of boyu_qhouse"
          :key="index"
        >
          <div class="img-items">
            <img :src="item.boyu_qhphoto" />
          </div>
          <p>{{ item.boyu_qhintroduce }}</p>
          <p class="price">
            <span>{{ item.boyu_qhprice.slice(0, -3) }}</span>
            元/月
          </p>
         
         
        </li>
      </ul>
    </div>
</template>
<script>
 export default{
     data(){
         return{
      boyu_qhouse: [],
     }
     },
     mounted(){
     this.axios.get("/qhouse").then(res => {
      this.boyu_qhouse = res.data.results;
    });
    
     },
    
    
 }


</script>



<style scoped>
.huxing {
  
  padding-left: 14px;
  padding-right: 14px;
  
}

.huxing > h3 {
  display: flex;
  margin-bottom: 5px;
  align-items: flex-start;
}

.huxing > span {
  display: flex;
  color: #666;
  align-items: flex-start;
}

.huxing > p {
  font-size: 14px;
  color: #888;
  float: right;
  margin-top: -22px;
}

ul,
li {
  list-style: none;
}

/*隐藏掉滚动条*/
.slide-box::-webkit-scrollbar {
  display: none;
}

.slide-box {
  margin-top: 20px;
  display: -webkit-box;
  overflow-x: auto;
  /*适应苹果*/
  -webkit-overflow-scrolling: touch;
}

.slide-item {
  width: 210px;
  /* border: 1px solid #fff; */
  margin-right: 10px;
  border-radius: 5px;
}

.slide-item > p {
  font-size: 14px;
  font-weight: 600;
  margin-top: 5px;
  margin-bottom: 2px;
}

.price > span {
  color: burlywood;
}


.img-items > img {
  width: 210px;
  height: 130px;
  border-radius: 5px;
} 
</style>